<template>
  <transition-group
    name="transition-list-fade"
    tag="div"
    class="transition-list-fade-class"
  >
    <slot></slot>
  </transition-group>
</template>

<script lang="ts">
import { Component, Prop, Vue } from '@/plugins/class-component-hooks'

@Component
export default class TransitionListFade extends Vue {}
</script>

<style lang="scss">
.transition-list-fade-item {
  transition: all 1s;
}
.transition-list-fade-enter, .transition-list-fade-leave-to
/* .transition-list-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.transition-list-fade-leave-active {
  position: absolute;
}
</style>
